<template>
  <div class="wrapper">
    <div v-for="(item,index) in qudata_all" :key="index" class="qu-container">
      <div class="title">{{index+1}}. {{item.enText}}</div>
      <div>
        <el-input v-model="item.userText" placeholder="" @change="keyshowFun(item)"></el-input>
      </div>
      <div class="keys" v-show="item.keyshow">{{item.znText}}</div>
    </div>

  </div>
</template>

<script>
export default {
  components:{},
  props:{},
  data(){
    return {
      qudata_all:[]
    }
  },
  watch:{},
  computed:{},
  created(){},
  mounted(){
    this.get_quDataFun()
  },
  methods:{
    get_quDataFun(){
      this.$axios({
        methods:'get',
        url:"../../static/data/fanyi.json"
      }).then((response)=>{
        console.log(response)
        this.qudata_all = response.data.data
      })
    },
    keyshowFun(row){
      console.log("123")
      
      row.keyshow = true
      console.log(row)
    }

  },
}
</script>
<style scoped>
.wrapper{
  width: 80%;
  margin: 0 auto;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 10px;
}
.qu-container{
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.title{
  padding: 20px;
  text-align: left;
}
.keys{
  margin-top:4px ;
  padding: 10px;
  text-align: left;
  background: #67C23A;
  color: #fff;
}
</style>